<template>
	<view class="navigation-content">
		<view class="navigation-occupyTop" v-if="occupyTop" :style="{
			// #ifdef H5
			height: style.height + 'px',
			// #endif
			// #ifndef H5
			height: style.height + sysInfo.statusBarHeight + 'px',
			// #endif
		}"></view>
		<view class="navigation-box" :style="{
			background: bgColor,
			zIndex: zIndex,
			// #ifdef H5
			height: style.height + 'px',
			// #endif
			// #ifndef H5
			height: style.height + sysInfo.statusBarHeight + 'px',
			// #endif
		}">
			<view class="navigation-box-ui" :style="{
				height: style.height + 'px',
				// #ifdef H5
				// #endif
				// #ifndef H5
				marginTop: sysInfo.statusBarHeight + 'px',
				// #endif
			}">
				<view class="navigation-left-slot">
					<slot name="left">
						<ez-icon name="icon-arrow-left" size="45" :color="titleColor" @click="clickLeftButton" />
					</slot>
				</view>
				<!-- <text class="navigation-icon navigation-icon-left iconfont" :class="[ LeftButtonConfig.icon ]" :style="{
					...positionStyle,
					color: titleColor
				}" @click="clickLeftButton" v-if="showLeftButton"></text> -->
				<view class="navigation-title">
					<slot name="center">
						<text class="navigation-title" :style="{color: titleColor}">{{title}}</text>
					</slot>
				</view>
				<view class="navigation-right-slot" :style="positionStyle" @click="clickRightButton">
					<slot>
						<text class="navigation-icon navigation-icon-right iconfont" :class="[ RightButtonConfig.icon ]" :style="{color: titleColor}"></text>
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../config/index.js";
	import commonMethods from "../../library/commonMethods.js";
	export default{
		data() {
			return {
				sysInfo: {},
				zIndex: config.navBarZIndex,
				style: {
					height: 0,
				},
				LeftButtonConfig: {
					icon: "icon-arrow-left"
				},
				RightButtonConfig: {
					type: "icon",
					icon: "",
				},
				positionStyle: {
					position: "",
					zIndex: config.navBarZIndex
				}
			};
		},
		methods: {
			/* 返回 */
			goBack() {
				if(getCurrentPages().length > 1){
					uni.navigateBack({})
				}else{
					uni.switchTab({
						url: "/pages/recommend/recommend"
					})
				}
			},
			/* 点击左侧按钮 */
			clickLeftButton() {
				if(commonMethods.isEmpty(this.leftButton)){
					this.goBack();
				}else{
					this.$emit("clickLeftButton");
				}
			},
			/* 点击右侧按钮 */
			clickRightButton() {
				this.$emit("clickRightButton");
			},
		},
		created() {
			this.sysInfo = uni.getSystemInfoSync()
			this.style.height = commonMethods.conversionPixelUnit(88 , "px");
			if(!commonMethods.isEmpty(this.leftButton)){
				this.LeftButtonConfig = {
					...this.leftButton
				}
			}
			if(!commonMethods.isEmpty(this.rightButton)){
				this.RightButtonConfig = {
					...this.rightButton
				}
			}
		},
		watch: {
			position: {
				handler() {
					this.positionStyle.position = this.position == "default" ? "" : this.position
				},
				immediate: true
			}
		},
		props: {
			/* 背景颜色 */
			bgColor: {
				type: String,
				default: "#d43d3d"
			},
			/* 标题 */
			title: {
				type: String,
				default: "旅游头条-e栈攻略"
			},
			/* 标题颜色 */
			titleColor: {
				type: String,
				default: "#ffffff"
			},
			/* 左侧按钮 */
			leftButton: {
				type: Object,
			},
			/* 是否显示左侧按钮 */
			showLeftButton: {
				type: Boolean,
				default: true
			},
			/* 右侧按钮 */
			rightButton: {
				type: Object,
			},
			/* 是否占用顶部空间 */
			occupyTop: {
				type: Boolean,
				default: true
			},
			/* UI定位方式 */
			position: {
				type: String,
				default: "none"
			}
		}
	}
</script>

<style lang="less" scoped>
	//@import url("~@/static/css/common_less.less");
	@navigationHeight: 88rpx;
	.navigation-content{
		width: 750rpx;
		.navigation-box{
			position: fixed;
			/* z-index: 999999; */
			left: 0;
			top: 0;
			width: 750rpx;
			color: #ffffff;
			.navigation-box-ui{
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: center;
				width: 750rpx;
				.navigation-icon , .navigation-title{
					justify-content: center;
					align-items: center;
					align-content: center;
				}
				/* .navigation-icon , .navigation-right-slot{
					position: absolute;
					z-index: 999999;
				} */
				.navigation-ui-absolute{
					position: absolute;
					z-index: 999999;
				}
				.navigation-icon-left , .navigation-left-slot{
					left: 0;
				}
				.navigation-left-slot{
					padding: 16rpx;
					justify-content: center;
					align-items: center;
				}
				.navigation-icon-right , .navigation-right-slot{
					right: 0;
				}
				.navigation-icon{
					width: @navigationHeight;
					font-size: 70rpx;
				}
				.navigation-title{
					flex: 1;
					font-size: 32rpx;
					font-weight: bold;
				}
				.navigation-right-slot{
					padding-right: 30rpx;
					/* height: @navigationHeight; */
				}
			}
		}
		.navigation-occupyTop{
			width: 750rpx;
			/* height:  @navigationHeight; */
		}
	}
</style>
